import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Checkbox, Tooltip, Statistic, Card } from "antd";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, Descriptions } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened, IconChainStroked } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";

const DashboardPage = () => {
    const { windowInnerHeight } = useModel("global");

    const state = useReactive({
        tableScolleY: 330,
    });

    const loadData = () => {};

    useEffect(() => {
        loadData();
    }, []);

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={16}>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="正式员工数" value={11.28} precision={2} valueStyle={{ color: "#3f8600" }} prefix={<ArrowUpOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="兼职人员数" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="临时工人数" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="实习生人数" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="离职人数" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="当日关注度" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default DashboardPage;
